<template>
  <div class="function-com">
    <h1>生命周期函数</h1>
    <form @submit.prevent="">
        <input type="text" placeholder="请输入用户名">
        <input type="password" placeholder="请输入密码">
        <button>提交</button>
    </form>
    <table border="1" style="width:100%;">
        <tr>
            <td>用户名：</td>
            <td></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td></td>
        </tr>
    </table>
  </div>
</template>

<script setup>
import { onBeforeUpdate, onVeforeMount,onMounted, onUpdated, reactive,ref } from 'vue';

let username = ref('');//ref声明的响应式数据是proxy，在读取/赋值都需要直接访问到value
let userpwd = ref('');

let obj = rective({
    uname : '',
    upwd : '',
});

// 生命周期函数
onVeforeMount(()=>{
    console.log(username.value);
    console.log(userpwd.value);
    console.log(obj);
})

onMounted(()=>{
    console.log(username.value);
    console.log(userpwd.value);
    console.log(obj);
})
onBeforeUpdate(()=>{
    console.log(username.value);
    console.log(userpwd.value);
    console.log(obj);
})

onUpdated(()=>{
    console.log(username.value);
    console.log(userpwd.value);
    console.log(obj);
})

//提交函数
const myForm = ()=>{
    obj.uname = username.value
    console.log(obj);
    
}
</script>

<style scoped>

</style>